import * as THREE from 'three'
import { ConstructiveSolidGeometry } from '../../../utils/octreeCSG'
import Element from '../../../base/Element'
import EffetMaterials from '../../../materials/EffetMaterials'
import WaterMaterials from '../../../materials/WaterMaterials'
import CellMaterials from '../../../materials/CellMaterials'
import FloorMaterials from '../../../materials/FloorMaterials'
export default class Ship extends Element {
  constructor() {
    super()
    this.group
    this.init()
  }
  init() {
    this.group = new THREE.Group()
    this.effetMaterials
    this.circleMaterials
    this.person = {}
    this.createPerson()
    this.createTop()
    this.createBootm()
    this.createTopRing()
    this.createBootmRing()
    this.createBottomLine()
    this.createCirclePlane()
    this.scene.add(this.group)
    // this.debugSphereGeometry(this.group, 'group')
  }
  createTop() {
    const sphereGeometry = new THREE.SphereGeometry(200, 50, 50, 0, (360 * Math.PI) / 180, 0, 0.5 * Math.PI)
    const sphereMaterial = new THREE.MeshPhysicalMaterial({
      color: '#fff',
      transparent: true, // 透明度设置为 true
      opacity: 0.6, // 设置透明度
      roughness: 0,
      metalness: 0,
      envMapIntensity: 1, //需要搭配transparent
      transmission: 0.15, // 折射度，表示光线经过材料时的衰减程度
      clearcoat: 1,
      clearcoatRoughness: 0,
      // refractionRatio: 1.5, // 折射率，控制光的折射程度
    })
    const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
    sphere.scale.y = 0.3
    this.group.add(sphere)
    // sphere.layers.toggle(2)
    // this.debugSphereGeometry(sphere, 'sphere')
  }
  createBootm() {
    const sphereGeometry = new THREE.SphereGeometry(200, 50, 50, 0, (360 * Math.PI) / 180, 0, 0.5 * Math.PI)
    this.effetMaterials = new CellMaterials()
    const sphere = new THREE.Mesh(sphereGeometry, this.effetMaterials)
    sphere.scale.y = 0.3
    sphere.rotation.z = Math.PI
    this.group.add(sphere)
  }
  createTopRing() {
    const big = new THREE.ConeGeometry(300, 60, 130, 5, false)
    const small = new THREE.ConeGeometry(370, 180, 130, 5, false)
    const material = new THREE.MeshPhysicalMaterial({
      color: '#a0a2a4',
      metalness: 1.0,
      roughness: 0.5,
      side: THREE.DoubleSide,
    })
    const bigMesh = new THREE.Mesh(big, material)
    const smallMesh = new THREE.Mesh(small, material)
    const subtractMesh = new THREE.Mesh(ConstructiveSolidGeometry(bigMesh, smallMesh, 'subtract'), material)
    subtractMesh.position.y = 20
    subtractMesh.scale.set(0.89, 0.89, 0.89)
    this.group.add(subtractMesh)
  }
  createBootmRing() {
    const big = new THREE.ConeGeometry(300, 60, 130, 5, false)
    const small = new THREE.ConeGeometry(370, 180, 130, 5, false)
    const material = new THREE.MeshPhysicalMaterial({
      color: '#a0a2a4',
      metalness: 1.0,
      roughness: 0.5,
    })
    const bigMesh = new THREE.Mesh(big, material)
    const smallMesh = new THREE.Mesh(small, material)
    const subtractMesh = new THREE.Mesh(ConstructiveSolidGeometry(bigMesh, smallMesh, 'subtract'), material)
    subtractMesh.rotation.z = Math.PI
    subtractMesh.position.y = -40
    subtractMesh.scale.set(0.72, 0.72, 0.72)
    this.group.add(subtractMesh)
  }
  createBottomLine() {
    const torusGeometry = new THREE.TorusGeometry(200, 10, 10, 100, (360 * Math.PI) / 180)
    const torusMaterial = new THREE.MeshBasicMaterial({
      color: '#0781A8',
    })
    const torusMesh = new THREE.Mesh(torusGeometry, torusMaterial)
    torusMesh.rotation.x = Math.PI / 2
    torusMesh.position.y = -8.6
    torusMesh.scale.set(1.11, 1.11, 1.11)
    this.group.add(torusMesh)
    torusMesh.layers.enable(1)
    // this.debugSphereGeometry(torusMesh, 'torusMesh')
  }
  createCirclePlane() {
    const circleGeometry = new THREE.CircleGeometry(200, 200)
    this.circleMaterials = new FloorMaterials()
    this.circleMaterials.uniforms.iChannel0.value = this.resource.items['iChannel0']
    this.circleMaterials.uniforms.iChannel1.value = this.resource.items['iChannel1']
    this.circleMaterials.uniforms.iChannel2.value = this.resource.items['iChannel2']
    const circle = new THREE.Mesh(circleGeometry, this.circleMaterials)
    circle.rotation.x = Math.PI / 2
    circle.position.y = -15
    this.group.add(circle)
    this.debugSphereGeometry(circle, 'plane')
  }

  createPerson() {
    this.person.model = this.resource.items['robot']
    this.person.model.scale.set(0.05, 0.05, 0.05)
    this.person.mixer = new THREE.AnimationMixer(this.person.model)
    this.person.action = this.person.mixer.clipAction(this.person.model.animations[0])
    console.log(this.person.model)
    this.scene.add(this.person.model)
    this.person.action.play()
    this.debugPerson()
  }
  debugPerson() {
    const self = this
    const ui = this.debug.gui
    const groupFolder = ui.addFolder('人物')
    let moveFn = new (function () {
      this.move = true
    })()
    groupFolder.add(moveFn, 'move').onChange((e) => {
      if (!e) {
        self.person.action.paused = false
      } else {
        self.person.action.paused = true
      }
    })
  }
  debugSphereGeometry(sphere, name) {
    const ui = this.debug.gui
    const groupFolder = ui.addFolder(name || '未命名')
    groupFolder.add(sphere.position, 'x').min(-40).max(40).step(1).name('positionX')
    groupFolder.add(sphere.position, 'y').min(-40).max(40).step(1).name('positionY')
    groupFolder.add(sphere.position, 'z').min(-40).max(40).step(1).name('positionZ')
    groupFolder.add(sphere.scale, 'x').min(0).max(2).step(0.01).name('scaleX')
    groupFolder.add(sphere.scale, 'y').min(0).max(2).step(0.01).name('scaleY')
    groupFolder.add(sphere.scale, 'z').min(0).max(2).step(0.01).name('scaleZ')
  }

  update() {
    const { delta, elapsed } = this.time
    this.person.mixer && this.person.mixer.update(delta)
    this.effetMaterials.uniforms.iTime.value = elapsed
    this.circleMaterials.uniforms.iTime.value = elapsed
  }
}
